<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
    table td, .table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 200px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    .addBrand {
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id = "app">
    <!-- 添加品牌 -->
    <form action="" @submit.prevent = "add">
      <div class="addBrand">
        <input type="text" v-model.trim = "brandName" placeholder="请输入品牌名称">
        <button type="submit">添加品牌</button>
      </div>
    </form>
    <!-- 表格 -->
    <table>
      <thead>
        <th>#</th>
        <th>品牌名称</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for = "item in list" :key = "item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <input type="checkbox" v-model = "item.status" :id="'cb' + item.id">
            <!-- <span v-if = "item.status">已启用</span>
            <span v-else>已禁用</span> -->
            <label :for="'cb' + item.id">{{ item.status ? "已启用" : "已禁用" }}</label>
          </td>
          <td>{{item.time | dateFormat}}</td>
          <td>
            <a  href="" @click.prevent = "remove(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // 声明一个格式化时间的全局过滤器
    Vue.filter('dateFormat',val =>{
      // const year = val.getFullYear()
      // const month = val.getMonth()
      // const day = val.getUTCDate()
      // const hours = val.getHours()
      // const minutes = val.getMinutes()
      return val.getFullYear() + '-' + val.getMonth() + '-' + val.getUTCDate() + ' ' + val.getHours() + ':' + val.getMinutes()
    })
    const app = new Vue({
      el:"#app",
      data:{
        brandName:"",
        nextId:4,
        obj:{},
        list:[
          {id:1,name:"宝马",status:true,time:new Date()},
          {id:2,name:"奔驰",status:false,time:new Date()},
          {id:3,name:"奥迪",status:true,time:new Date()},
        ]
      },
      methods:{
        // 移除方法
        // remove(item){
        //   if(this.list.includes(item)){
        //     // 删除list数组中指定对象
        //     this.list.splice(this.list[item],1)
        //   }
        // },
        remove(id){
         this.list = this.list.filter(item => item.id != id)
        },
        // 添加品牌
        add(){
          // 如果this.brandName为空则return出去
          if(this.brandName == ''){
             return alert('请输入品牌名称');
          }
          //如果不为空则进行添加
          var obj = {
            id:this.nextId,
            name:this.brandName,
            status:true,
            time:new Date()
          };
          this.list.push(obj)
          this.brandName = "",
          this.nextId++;
        }
      }
    })
  </script>
  </div>
</body>
</html>